<template>
  <div class="app-container">
    <div class="table-page-search-wrapper">
      <el-form :inline="true" label-width="100px">
        <el-row :gutter="18">
          <el-col :md="8" :sm="24">
            <el-form-item label="出库单号">
              <el-input
                v-model="queryParam.outboundNum"
                placeholder="请输入出库单号"
                clearable
                @keyup.enter.native="onSearch"
                @clear="onSearch"
              />
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="24">
            <el-form-item label="加工单号">
              <el-input
                v-model="queryParam.taskNum"
                placeholder="请输入备料单号"
                clearable
                @keyup.enter.native="onSearch"
                @clear="onSearch"
              />
            </el-form-item>
          </el-col>
          <el-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <el-button v-waves type="primary" icon="el-icon-search" @click="onSearch">
                查询
              </el-button>
              <el-button type="info" icon="el-icon-refresh" @click="reset">
                重置
              </el-button>
            </span>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="table-operator" />

    <el-table
      v-loading="loadingData"
      :data="list"
      element-loading-text="Loading"
      fit
      highlight-current-row
      row-key="id"
      @sort-change="appendSorterParam"
    >
      <el-table-column align="center" label="出库单号">
        <template slot-scope="scope">
          <span>
            {{ scope.row.outboundNum }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="出库类型">
        <template slot-scope="scope">
          <span>
            {{ scope.row.outboundType }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="加工单号">
        <template slot-scope="scope">
          <span>
            {{ scope.row.taskNum }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="出库总数">
        <template slot-scope="scope">
          <span>{{ scope.row.quantity }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="仓库经办人">
        <template slot-scope="scope">
          <span>
            {{ scope.row.createByName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="签收人">
        <template slot-scope="scope">
          <span>
            {{ scope.row.updateByName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-popconfirm
            v-if="!scope.row.reciveUserId"
            title="是否确定签收？"
            @confirm="signFor(scope.row.id)"
          >
            <el-button slot="reference" v-permission="['update']" type="text">
              签收
            </el-button>
          </el-popconfirm>
          <span v-if="!scope.row.reciveUserId" v-permission="['detail']" v-permission-again="['update', 'delete']">
            <el-divider direction="vertical" />
          </span>
          <el-button v-permission="['detail']" type="text" @click="$refs.goodsDrawerEl.open(scope.row)">
            商品明细
          </el-button>
          <span v-permission="['detail']" v-permission-again="['update', 'delete']">
            <el-divider direction="vertical" />
          </span>
          <el-button v-permission="['detail']" type="text" @click="showQr(scope.row)">
            二维码
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pagination.total > 0"
      :total="pagination.total"
      :page.sync="pagination.current"
      :limit.sync="pagination.pageSize"
      :style="{ textAlign: 'right' }"
      @pagination="handlePaginationChanged"
    />
    <goodsDrawer ref="goodsDrawerEl" />
    <qr-code ref="qrCode" title="出库二维码" />
  </div>
</template>

<script>
import list from '@/components/diboot/mixins/list'
import qrCode from '@/components/QRCode'
import waves from '@/directive/waves'
import { dibootApi } from '@/utils/request'
import Canvas2Image from '@/utils/canvas2Image.js'
import html2canvas from 'html2canvas'
import goodsDrawer from './components/goodsDrawer.vue'
export default {
  name: 'OutboundList',
  directives: { waves },
  components: {
    qrCode,
    goodsDrawer
  },
  mixins: [list],
  data() {
    return {
      baseApi: '/outbound',
      getListFromMixin: true,
      imgName: '商品明细'
    }
  },
  methods: {
    showQr(row) {
      const qrString = JSON.stringify({
        outStoreNum: row.outboundNum,
        QRCode: 'Issue'
      })
      this.$refs.qrCode.open(row.outboundNum, qrString)
    },
    async signFor(id) {
      const res = await dibootApi.post(`outbound/receive?outboundId=${Number(id)}`)
      if (res.code === 0) {
        this.$message.success(res.msg)
        this.getList()
      }
    },
    downloadCurrentPage(elementId) {
      const that = this
      // 生成图片之前，需先将整体的滚动条隐藏掉，否则生成出来的照片会偏移
      document.getElementById('app').style.overflowY = 'hidden'
      // 两个参数：所需要截图的元素id，截图后要执行的函数， canvas为截图后返回的最后一个canvas
      var shareContent = document.getElementById(elementId)
      var width = shareContent.offsetWidth
      var height = shareContent.offsetHeight
      var canvas = document.createElement('canvas')
      var scale = 6 // 这里为了下载出更清晰的图片，值越大越清晰

      canvas.width = width * scale
      canvas.height = height * scale
      canvas.getContext('2d').scale(scale, scale)

      var opts = {
        scale: 1, // 不管上面的scale是多少倍，这里只能取1，否则会显示不完全
        canvas: canvas,
        logging: true,
        width: width,
        height: height
      }
      html2canvas(shareContent, opts).then(function(canvas) {
        // 这个方式是直接将canvas保存为图片的，具体参数可自行查看源码
        // eslint-disable-next-line no-unused-vars
        var img = Canvas2Image.saveAsImage(canvas, canvas.width, canvas.height, 'png', that.imgName)
        // 这个方式只是提供展示图片的功能，暂时没有用到
        // var img = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height,'PNG');
        //  document.body.appendChild(img);

        // 生成图片之前，需先将整体的滚动恢复为之前的状态
        document.getElementById('app').style.overflowY = 'scroll'
        // 关闭loading
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
